<template>
  <div class="editphone">
    <text-header :title="title" :bgcolor="'#41cb47'" :topath="'/setting'" class="textHeader"></text-header>
    <div class="forgetpw-con" v-if="showFlag=='0'">
      <yd-cell-item class="inputItem currentPhone">
          <span class="phonetext" slot="left">当前手机号</span>
          <input v-model="oldPhone" type="text" slot="right" placeholder="输入当前手机号">
          <!-- <span class="phoneNumber" slot="right">{{currentPhone}}</span> -->
          <!-- <input class="" type="text" slot="right" placeholder="点击输入验证码"> -->
      </yd-cell-item>
      <yd-cell-item class="inputItem phoneCode">
            <input v-model="checkOldCode" type="text" slot="right" placeholder="点击输入验证码">

            <!-- ↓↓关键代码是这里↓↓ -->
            <yd-sendcode class="sendCodeBtn" slot="right" 
                         v-model="startOld" 
                         init-str="|　获取短信验证码"
                         second="60"
                         run-str="|　{%s}秒"
                         reset-str="|　获取短信验证码"
                         @click.native="sendOldCode"
            ></yd-sendcode>
            <!-- ↑↑关键代码是这里↑↑ -->

      </yd-cell-item>
    </div>
    <div class="forgetpw-con" v-if="showFlag=='1'">
      <yd-cell-item class="inputItem currentPhone">
          <span class="phonetext" slot="left">新手机号</span>
          <input v-model="currentPhone" type="text" slot="right" placeholder="输入新手机号">
          <!-- <span class="phoneNumber" slot="right">{{currentPhone}}</span> -->
          <!-- <input class="" type="text" slot="right" placeholder="点击输入验证码"> -->
      </yd-cell-item>
      <yd-cell-item class="inputItem phoneCode">
            <input v-model="checkCode" type="text" slot="right" placeholder="点击输入验证码">

            <!-- ↓↓关键代码是这里↓↓ -->
            <yd-sendcode class="sendCodeBtn" slot="right" 
                         v-model="start" 
                         init-str="|　获取短信验证码"
                         second="60"
                         run-str="|　{%s}秒"
                         reset-str="|　获取短信验证码"
                         @click.native="sendCode"
            ></yd-sendcode>
            <!-- ↑↑关键代码是这里↑↑ -->

      </yd-cell-item>
    </div>
    <yd-button class="nextBtn" size="large" type="primary" @click.native="nextBtn">{{showFlag=='0'?'下一步':'完成'}}</yd-button>
  </div>
</template>

<script>
import textHeader from "../components/TextHeader";
import URL from "../until/urlConfig.js";
import md5 from 'js-md5';
export default {
  name:'editphone',
  components: {
    textHeader
  },
  data() {
    return {
      title:'修改手机号',
      currentPhone:'',//当前手机号
      checkCode:'',
      checkOldCode:'',
      oldPhone:'',
      start: false,
      startOld:false,
      password:'',
      passwordagain:'',
      showFlag:'0'
    };
  },
  methods: {
    sendOldCode() {
        if(this.oldPhone==''){
          this.$dialog.toast({
              mes: '请输入手机号',
              timeout: 1500
          });
          return;
        }
        this.$http.get(URL.forgetPWDPhoneCode+'?phone='+this.oldPhone)
        .then(res=>{
          this.checkOldCode=res.data[0];
          this.startOld = true;
        })
    },
    sendCode(){
      if(this.currentPhone==''){
          this.$dialog.toast({
              mes: '请输入手机号',
              timeout: 1500
          });
          return;
        }
        this.$http.get(URL.forgetPWDPhoneCode+'?phone='+this.currentPhone)
        .then(res=>{
          this.checkCode=res.data[0];
          this.start = true;
        })
    },
    nextBtn(){
      if(this.showFlag=='0'){
        if(this.oldPhone==''||this.checkOldCode==''){
          this.$dialog.toast({
              mes: '手机号和验证码不能为空',
              timeout: 1500
          });
          return;
        }
        this.showFlag='1';
      }else if(this.showFlag=='1'){
        if(this.currentPhone==''||this.checkCode==''){
          this.$dialog.toast({
              mes: '手机号和验证码不能为空',
              timeout: 1500
          });
          return;
        }
        this.$http.post(URL.forgetUpdatePWD,JSON.stringify({phone:this.currentPhone,code:this.checkCode,password:md5(this.password)}))
        .then(res=>{
          this.$router.push('/login');
        })
      }
    }
  },
  computed: {
    osName() {
      return this.$store.state.osName;
    }
  },
  created() {},
  mounted() {
    // this.initUserInfo();
  }
};
</script>
<style lang="scss">
@import "../style/public.scss";
.editphone {
  height:100%;
  .yd-navbar-item{
    flex:none;
  }
  .forgetpw-con{
    .currentPhone{
      border-bottom:rem(2) solid #f8f8f8;
      font-size:rem(28);
      margin:0 0.2rem;
      padding-left:0;
      input::-webkit-input-placeholder {
        color: #7c867c;
        font-family:'Microsoft Yahei';
        font-size:rem(14);
      }
      .yd-cell-right{
        padding-right:0;
      }
      .phonetext{
        color:#7c867c;
      }
      .phoneNumber{
        color:#bcc1bc;
      }
      input{
        text-align:right;
        color:#7c867c;
      }
    }
    .phoneCode{
      font-size:rem(28);
      color:#7c867c;
      input{
        color:#7c867c;
      }
      input::-webkit-input-placeholder {
        color: #7c867c;
        font-family:'Microsoft Yahei';
        font-size:rem(14);
      }
      .sendCodeBtn{
        font-family:'Microsoft Yahei';
        padding:0;
        background:#fff;
        color:#7c867c;
      }
    }
  }
  .updatepw-con{
    .currentPhone{
      border-bottom:rem(2) solid #f8f8f8;
      font-size:rem(28);
      margin:0 0.2rem;
      padding-left:0;
      input{
        color:#7c867c;
      }
      .yd-cell-right{
        padding-right:0;
      }
      input::-webkit-input-placeholder {
        color: #7c867c;
        font-family:'Microsoft Yahei';
        font-size:rem(14);
      }
    }
    .phoneCode{
      font-size:rem(28);
      color:#7c867c;
      padding-left:0;
      margin:0 0.2rem;
      .yd-cell-right{
        padding-right:0;
      }
      input{
        color:#7c867c;
      }
      input::-webkit-input-placeholder {
        color: #7c867c;
        font-family:'Microsoft Yahei';
        font-size:rem(14);
      }
    }
  }
  .nextBtn{
    font-family:'Microsoft Yahei';
    width:calc(100% - 0.4rem);
    margin:rem(66) auto 0;
    font-size:rem(32);
    height:rem(76);
    color:#fff;
    line-height:rem(76);
    font-weight:100;
  }
}
</style>